import React from "react";
import "antd/dist/antd.css";
import {
  PageHeader,
  Statistic,
  Descriptions,
  Card,
  Tabs,
  Table,
  Divider,
  Badge,
  Space,
} from "antd";
import { DeliveryOrder } from "../../../services/auth";
import DeliveryDrawer from "./components";
import GoodsDetail from "./goodsDetail";

class DeliveryDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      productIndex: null,
      orderInfo: {},
      orderdetail: [],
    };
    this.value = this.props.value;
  }

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  reset = () => {
    DeliveryOrder(this.value.id).then(
      (response) => {
        console.log(response.data);
        this.setState({
          orderInfo: response.data,
          orderdetail: response.data.deliverydtl,
        });
      },
      (error) => {
        console.log("error");
      }
    );
  };

  onSubmit = (values) => {
    console.log("Received values of form:", values);
  };

  judgeStatus = (status) => {
    switch (status) {
      case "已完成":
        return "success";
      case "待发送":
        return "error";
      case "待发货":
        return "processing";
      case "待付款":
        return "warning";
      default:
        return "default";
    }
  };

  columns = [
    {
      title: "产品编号",
      dataIndex: "goods_id",
      align: "center",
    },
    {
      title: "产品名称",
      dataIndex: "goods_name",
      align: "center",
    },
    {
      title: "数量",
      dataIndex: "quantity",
      align: "center",
    },
    {
      title: "状态",
      dataIndex: "status",
      align: "center",
      render: (state) => (
        <Badge status={this.judgeStatus(state)} text={state} />
      ),
    },
    {
      title: "操作",
      dataIndex: "action",
      align: "center",
      render: (text, record, index) => (
        <Space>
          {/* 拣配 */}
          <DeliveryDrawer order={record} reset={this.reset} />
          <Divider type="vertical" />
          {/* 发货 */}
          <GoodsDetail
            deliverydtl={record}
            delivery={this.state.orderInfo}
            reset={this.reset}
          />
        </Space>
      ),
    },
  ];

  componentDidMount() {
    DeliveryOrder(this.value.id).then(
      (response) => {
        console.log(response.data);
        this.setState({
          orderInfo: response.data,
          orderdetail: response.data.deliverydtl,
        });
      },
      (error) => {
        console.log("error");
      }
    );
  }

  render() {
    const { TabPane } = Tabs;

    const Content = ({ children, extra }) => (
      <div className="content">
        <div className="main">{children}</div>
        <div className="extra">{extra}</div>
      </div>
    );

    return (
      <div>
        <PageHeader
          className="site-page-header-responsive"
          title="发货详情"
          subTitle={this.value.id}
          footer={
            <Tabs defaultActiveKey="1">
              <TabPane tab="详情" key="1">
                <div>
                  <Card bordered={false}>
                    <Table
                      columns={this.columns}
                      dataSource={this.state.orderdetail}
                      rowKey={(r) => r.goods_id}
                      size="small"
                    />
                  </Card>
                </div>
              </TabPane>
            </Tabs>
          }
        >

          <Content
            extra={
              <div
                style={{
                  display: "flex",
                  width: "max-content",
                  justifyContent: "flex-end",
                  margin: "24px 0px 24px 0px",
                  textAlign: "center",
                }}
              >

                <Statistic
                  title="状态"
                  value={this.state.orderInfo.status}
                  style={{ marginRight: 96 }}
                />
                <Statistic
                  title="货款"
                  prefix="￥"
                  value={this.state.orderInfo.total_price}
                  valueStyle={{ color: '#cf1322' }}
                />
              </div>
            }
          >
            <Descriptions size="small" column={2}>
              <Descriptions.Item label="公司编号">{`${this.state.orderInfo.company_name}(${this.state.orderInfo.company_id})`}</Descriptions.Item>
              <Descriptions.Item label="订单编号">
                <a>{this.state.orderInfo.order_id}</a>
              </Descriptions.Item>
              <Descriptions.Item label="创建时间">
                {this.state.orderInfo.docum_date}
              </Descriptions.Item>
              <Descriptions.Item label="计划送达">
                {this.state.orderInfo.req_deliv_date}
              </Descriptions.Item>
              <Descriptions.Item label="操作员">{`${this.state.orderInfo.operator_name}(${this.state.orderInfo.operator_id})`}</Descriptions.Item>
              <Descriptions.Item label="送达地址">
                {this.state.orderInfo.ship_to_address}
              </Descriptions.Item>
            </Descriptions>
          </Content>
        </PageHeader>
      </div>
    );
  }
}

export default DeliveryDetail;
